<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入圆的半径计算面积和周长</title>
    <style>
        table {
            border-collapse: collapse;
            width: 300px;
            text-align: center;
        }
    
        th, td {
            border: 1px solid black;
            padding: 8px;
        }
    </style>
    <script>
    function calculate() {
        var r = parseFloat(document.getElementById("radius").value);
    
        if (isNaN(r)) {
            alert("请输入有效的数字作为半径！");
        } else {
            var circumference = 2 * Math.PI * r;
            var area = Math.PI * r * r;
    
            document.getElementById("circumference").innerText = circumference.toFixed(2);
            document.getElementById("area").innerText = area.toFixed(2);
        }
    }
    </script>
</head>
<body>
    <table>
        <tr>
            <th>半径</th>
            <td><input type="text" id="radius"></td>
        </tr>
        <tr>
            <th>周长</th>
            <td id="circumference"></td>
        </tr>
        <tr>
            <th>面积</th>
            <td id="area"></td>
        </tr>
    </table>
    <button onclick="calculate()">计算</button>
</body>
</html>